<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    用户名：<input type="text" id="username"><span></span><br>
    密码：<input type="text" id="passwrod"><span></span><br>
    重复密码：<input type="text" id="passwrod2"><span></span><br>
    手机号：<input type="text" id="tel"><span></span><br>
    邮箱：<input type="text" id="email"><span></span><br>
    <input type="button" id="btn" value="提交">
</body>
<script>

    var um = document.getElementById("username");
    var pw = document.getElementById("passwrod");
    var pw2 = document.getElementById("passwrod2");
    var tel = document.getElementById("tel");
    var email = document.getElementById("email");
    var btn = document.getElementById("btn");

    var u = p = p2 = t = e = false;

    // 1. 用户名：用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
    um.oninput = function(){
        // 创建正则
        var reg = /^[\u2e80-\u9fff\w-]{4,20}$/;
        // 验证
        if(reg.test(this.value)){
            // 根据验证结果显示提示语
            this.nextElementSibling.innerHTML = "ok";
            u = true;
        }else{
            this.nextElementSibling.innerHTML = "不ok，用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符"
            u = false;
        }
    }

    // 2. 密码的规则：数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强
    pw.oninput = function(){
        var a = b = c = 0;
        // 创建正则
        var numReg = /\d/;
        var azReg = /[a-z]/i;
        var tsReg = /[^\da-z]/i;
        // 验证是否出现
        if(numReg.test(this.value)){
            a = 1;
        }
        if(azReg.test(this.value)){
            b = 1;
        }
        if(tsReg.test(this.value)){
            c = 1;
        }
        // 判断难度
        switch(a+b+c){
            case 1:this.nextElementSibling.innerHTML = "弱";
                break;
            case 2:this.nextElementSibling.innerHTML = "中";
                break;
            case 3:this.nextElementSibling.innerHTML = "强";
                break;
        }

        p = true;

        if(this.value === pw2.value){
            pw2.nextElementSibling.innerHTML = "密码一致";
            p2 = true;
        }else{
            pw2.nextElementSibling.innerHTML = "密码不一致";
            p2 = false;
        }
    }

    // 3. 重复密码       跟第一次输入 密码一致
    pw2.oninput = function(){
        if(this.value === pw.value){
            this.nextElementSibling.innerHTML = "密码一致";
            p2 = true;
        }else{
            this.nextElementSibling.innerHTML = "密码不一致";
            p2 = false;
        }
    }

    // 4. 手机号的验证：第一位必须为1，后面再加10位数字
    tel.oninput = function(){
        var reg = /^1\d{10}$/;
        if(reg.test(this.value)){
            this.nextElementSibling.innerHTML = "ok";
            t = true;
        }else{
            this.nextElementSibling.innerHTML = "不ok";
            t = false;
        }
    }

    // 5. 邮箱：数字大小写字母_- 3到12位 @ 数字字母 2到9位 . 字母2到5位
    email.oninput = function(){
        var reg = /^[\w-]{3,12}@[0-9a-z]{2,9}\.[a-z]{2,5}$/i;
        if(reg.test(this.value)){
            this.nextElementSibling.innerHTML = "ok";
            e = true;
        }else{
            this.nextElementSibling.innerHTML = "不ok";
            e = false;
        }
    }

    // 6. 提交按钮的时候，判断所有输入数据是否符合。符合跳转，否，不跳
    btn.onclick = function(){
        if(u && p && p2 && t && e){
            alert("提交成功");
        }else{
            // 提交失败，并提示 谁 失败了
            alert("提交失败");
        }
    }
    
</script>
</html>